<script setup lang="ts">
import useStatusBarHeight from '@/composables/statusBarHeight'
import { useUserInfoStore } from '@/store/userInfo'
import avatarPlaceholder from '@/static/images/avatar_placeholder.png'
import { useGeneralConfigStore } from '@/store/generalConfig'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const generalConfigStore = useGeneralConfigStore()

const token = computed(() => userInfoStore.userInfo?.token)
const username = computed(() => userInfoStore.userInfo?.nickname || '用户')

/* -------------------------------- 导航栏 START ------------------------------- */
const statusBarHeight = useStatusBarHeight()
// 是否显示状态栏背景
const isShowNavBg = ref(false)
// 监听页面滚动，更新状态栏背景可见性
onPageScroll((e) => {
  const toggle = useThrottleFn(() => isShowNavBg.value = e.scrollTop > 16, 100)
  toggle()
})
// 将状态栏背景可见性提供给状态栏组件
provide(isShowNavigationBarBackgroundKey, isShowNavBg)
/* --------------------------------- 导航栏 END -------------------------------- */

// 页面到顶部的距离
function topPadding() {
  return statusBarHeight.value + uni.upx2px(44) + uni.upx2px(55)
}

/**
 * @description 点击编辑信息时跳转到信息编辑页面
 */
function handleSetProfile() {
  router.push('profileSettings')
}

/**
 * @description 点击我的行程时跳转到订单列表页面
 */
function handleViewOrders() {
  router.pushTab('orders')
}

/**
 * @description 点击优惠券时跳转到我的优惠券页面
 */
function handleViewCouponList() {
  router.push({
    name: 'couponList',
    params: {
      navigation_destination: 'home',
    },
  })
}

/**
 * @description 点击发票报销时跳转到发票报销页面
 */
function handleReimburseInvoices() {
  router.push('invoiceReimbursement')
}

function handleCallCustomerService() {
  uni.makePhoneCall({
    phoneNumber: generalConfigStore.generalConfig?.mobile || '',
  })
}

/**
 * @description 点击客服中心时跳转到客服中心页面
 */
function handleViewCustomerServiceCenter() {
  router.push('customerServiceCenter')
}

/**
 * @description 点击关于我们时跳转到关于页面
 */
function handleViewAbout() {
  router.push('about')
}

/**
 * @description 点击设置时跳转到设置页面
 */
function handleViewSettings() {
  router.push('settings')
}
</script>

<template>
  <!-- 背景图片 -->
  <image
    class="absolute left-0 top-0 h-481rpx w-screen"
    src="@/static/images/profile_bg.png"
  />
  <NavigationBar title="我的" front-color="#ffffff" :is-show-back-button="false" />
  <Spacer :height="topPadding().toString()" unit="px" />
  <view class="relative z-10 px-30rpx">
    <!-- Profile START -->
    <view class="w-full flex items-center justify-between">
      <view class="flex items-center">
        <image class="h-100rpx w-100rpx rounded-full" :src="userInfoStore.userInfo?.avatar || avatarPlaceholder" />
        <Spacer width="28" />
        <view class="text-34rpx text-white font-bold leading-45rpx">
          Hi，{{ token ? username : '请登录' }}
        </view>
      </view>
      <button v-if="token" class="m-0 flex items-center justify-center rounded-full bg-white p-15rpx text-28rpx text-#3F8BF6 font-medium leading-28rpx" @tap="handleSetProfile">
        <image
          class="h-32rpx w-32rpx"
          src="@/static/images/profile_edit.png"
        />
        编辑信息
      </button>
    </view>
    <!-- Profile END -->
    <Spacer height="40" />
    <view class="rounded-20rpx bg-white px-30rpx py-40rpx">
      <view class="text-32rpx text-black font-bold leading-45rpx">
        服务与工具
      </view>
      <Spacer height="30" />
      <view class="flex items-center justify-between">
        <view class="flex flex-col items-center" @tap="handleViewOrders">
          <image
            class="h-67rpx w-82rpx"
            src="@/static/images/profile_grid_0.png"
          />
          <view class="text-28rpx text-#333333 font-medium leading-45rpx">
            我的行程
          </view>
        </view>
        <view class="flex flex-col items-center" @tap="handleViewCouponList">
          <image
            class="h-67rpx w-82rpx"
            src="@/static/images/profile_grid_1.png"
          />
          <view class="text-28rpx text-#333333 font-medium leading-45rpx">
            优惠券
          </view>
        </view>
        <view class="flex flex-col items-center" @tap="handleReimburseInvoices">
          <image
            class="h-67rpx w-82rpx"
            src="@/static/images/profile_grid_2.png"
          />
          <view class="text-28rpx text-#333333 font-medium leading-45rpx">
            发票报销
          </view>
        </view>
        <view class="flex flex-col items-center" @tap="handleCallCustomerService">
          <image
            class="h-67rpx w-82rpx"
            src="@/static/images/profile_grid_3.png"
          />
          <view class="text-28rpx text-#333333 font-medium leading-45rpx">
            客服电话
          </view>
        </view>
      </view>
    </view>
    <Spacer height="30" />
    <view class="rounded-20rpx bg-white">
      <view class="flex items-center justify-between px-30rpx py-44rpx" @tap="handleViewCustomerServiceCenter">
        <view class="flex items-center">
          <image
            class="h-35rpx w-35rpx"
            src="@/static/images/profile_cell_kefu.png"
          />
          <Spacer width="20" />
          <view class="text-28rpx text-#333333 font-medium leading-45rpx">
            客服中心
          </view>
        </view>
        <image
          class="h-25rpx w-13rpx"
          src="@/static/images/cheveron-right.png"
        />
      </view>
      <Divider width="642" color="#EBEBEB" />
      <view class="flex items-center justify-between px-30rpx py-44rpx" @tap="handleViewAbout">
        <view class="flex items-center">
          <image
            class="h-35rpx w-35rpx"
            src="@/static/images/profile_cell_info.png"
          />
          <Spacer width="20" />
          <view class="text-28rpx text-#333333 font-medium leading-45rpx">
            关于我们
          </view>
        </view>
        <image
          class="h-25rpx w-13rpx"
          src="@/static/images/cheveron-right.png"
        />
      </view>
      <Divider width="642" color="#EBEBEB" />
      <view class="flex items-center justify-between px-30rpx py-44rpx" @tap="handleViewSettings">
        <view class="flex items-center">
          <image
            class="h-35rpx w-35rpx"
            src="@/static/images/profile_cell_settings.png"
          />
          <Spacer width="20" />
          <view class="text-28rpx text-#333333 font-medium leading-45rpx">
            设置
          </view>
        </view>
        <image
          class="h-25rpx w-13rpx"
          src="@/static/images/cheveron-right.png"
        />
      </view>
    </view>
  </view>
</template>

<route lang="yaml">
name: 'profile'
style:
  navigationStyle: 'custom'
</route>
